<template>
    <!--地图挂载dom-->
    <div id=map>
    </div>
</template>

<script>
    //引入依赖
    import {defaults as defaultInteractions,} from 'ol/interaction';
    import {OSM} from 'ol/source';
    import Map from 'ol/Map';
    import View from 'ol/View';
    import {Tile as TileLayer} from 'ol/layer';
    import {fromLonLat} from 'ol/proj';
    export default {
        name: "MapInteraction",
        mounted(){
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                interactions: defaultInteractions({
                    altShiftDragRotate: true,//是否需要 Alt-Shift-drag 旋转
                    onFocusOnly: false,
                    doubleClickZoom: true,//是否需要双击缩放
                    keyboard: true,//是否需要键盘交互
                    mouseWheelZoom: true,//是否需要鼠标滚轮缩放
                    shiftDragZoom: true,//是否需要按住 Shift 键拖动缩放
                    dragPan: true,//是否需要拖动平移
                    pinchRotate: true,//是否需要捏合旋转
                    pinchZoom: true,//是否需要捏合缩放
                    zoomDelta: 2,//使用键盘或双击缩放时的缩放级别增量
                    zoomDuration: 2000,//缩放动画的持续时间
                }),
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                ],
                //配置视图
                view: new View({
                    center: fromLonLat([87.16552734375, 39.470125122358176]),
                    zoom: 5,
                    projection: "EPSG:3857", //指定投影
                })
            });
        }
    }
</script>

<style scoped>

</style>